<template>
	<view class="w-100  bg-cF6F7FB pb-3">
		<catalogue></catalogue>
		<view class="bg-img">
			<image class="h-100 w-100" :src="`${cosUrl}/bg/banner_blog_share.png`"></image>
		</view>
		<bread :textArr="['首页', '互联网运营分享']" :cls="['text-c303133', 'bg-cD3D3D3']"></bread>
		
		<!-- #ifdef MP-WEIXIN ||MP-TOUTIAO-->
		<view class="position-sticky" style="top: 0;z-index: 666;">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN ||MP-TOUTIAO-->
		<view class="position-sticky bg-cfff" style="top: 128rpx;z-index: 666;">
		<!-- #endif -->
			<view class="d-flex align-items-center px-2 py-1  bg-cfff pt-4 ">
				<text class="order pr-2">类型:</text>
				<view class="d-flex justify-content-between align-items-center state " style="flex: 1;"
					@tap="choose(0)">
					<view class="">
						{{typeTxt}}
					</view>
					<image src="../../static/website/select_down_arrow.svg" class="img-16px" mode=""></image>
				</view>
			</view>

			<view class="d-flex align-items-center px-2 py-1  bg-cfff pb-3">
				<text class="order pr-2">合集:</text>
				<view class="d-flex justify-content-between align-items-center state " style="flex: 1;"
					@tap="choose(1)">
					<view class="">
						{{collectionTxt}}
					</view>
					<image src="../../static/website/select_down_arrow.svg" class="img-16px" mode=""></image>
				</view>
			</view>
		</view>
		<u-picker @cancel="cancel" @close="close" closeOnClickOverlay @confirm="confirm" :show="show"
			:columns="!status?type:collection"></u-picker>

		<view class="w-100 d-flex flex-wrap justify-content-between" :class="i?'py-3':''" style="padding: 0 12px;">
			<view v-for="v,i in list" :key="i" class="item-container" @tap="jumpBlogDetail(v)">
				<view class="video_type" v-if="1 == v.sharetype.id">
					<image src="@/static/website/play.png" class="play"></image>
					<image :src="v.coverimage" mode="aspectFit" class="coverimage"></image>
				</view>
				<view class="article_type" v-if="2 == v.sharetype.id">
					<image :src="v.coverimage" mode="aspectFill" style="height: 275rpx;"></image>
					<view class="title">{{ v.name | substring(17)}}</view>
					<view class="updatetime">更新于{{ v.updatetime * 1000 | formatDate}}</view>
				</view>
			</view>
		</view>
		<view class="d-flex pt-3 justify-content-between align-items-center" style="padding: 0 12px 16px;" v-if="listEnd">
			<view class="line"></view>
			<view class="px-3" style="color: #909193; font-size: 32rpx;">已经到底了</view>
			<view class="line"></view>
		</view>
		
		<!-- #ifdef MP-WEIXIN ||MP-TOUTIAO-->
		<view style="display: block;height: 120rpx;">
			
		</view>
		<!-- #endif -->
		
		<view class="gotop" @click="goTop" v-show="scrollNum>300">
			<image src="../../static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
		</view>
<!-- 		<view class="d-flex pt-3 justify-content-between align-items-center" style="padding: 0 12px 16px;" v-if="listEnd">
			<view class="line"></view>
			<view class="px-3" style="color: #909193;">已经到底了</view>
			<view class="line"></view>
		</view> -->
	</view>
</template>

<script>
	import {
		http_blogpage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				show: false,
				typeTxt: '全部',
				collectionTxt: '全部',
				type: [
					['全部']
				],
				collection: [
					['全部']
				],
				status: 0,
				list: [],
				page: 1,
				total_page: 0,
				sharetypes: [],
				sharecollections: [],
		
			}
		},
		computed:  {
			listEnd() {
				if (this.page >= this.total_page) {
					return true
				} else {
					return false
				}
			},
			share_type_id() {
				return this.sharetypes.find(obj => obj.type_name === this.typeTxt)?.id
			},
			share_collection_id() {
				return this.sharecollections.find(obj => obj.collection_name === this.collectionTxt)?.id
			}
		},
		onLoad() {
			this.shareTitle = '互联网运营分享'
			this.shareDesc = '我们在这里分享我们对应用设计的思考，运营，实际案例的解析，帮助甲方更好的了解互联网应用这个增长的武器'
			this.share5v4Image = `${this.cosUrl}/bg/banner_blog_share.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_knowledage_1v1.png`
			
			http_blogpage({params: {share_type_id: this.share_type_id, share_collection_id: this.share_collection_id}})
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.total_page = res.data.last_page
						this.list = res.data.data
						this.sharetypes = res.data.sharetypes
						this.sharecollections = res.data.sharecollections
						this.type[0] = this.type[0].concat(this.sharetypes.map(obj => obj.type_name))
						this.collection[0] = this.collection[0].concat(this.sharecollections.map(obj => obj.collection_name))
					}
				})
		},
		onReachBottom() {
			if (this.listEnd) {
				return 
			}
			this.page = ++this.page;
			http_blogpage({params: {share_type_id: this.share_type_id, share_collection_id: this.share_collection_id, page: this.page}})
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.list = this.list.concat(res.data.data)
					}
				})
		},
		
		methods: {
			choose(e) {
				this.status = e
				this.show = true		
			},
			confirm(e) {	
				console.log(e);
				this.page = 1    // page要重要置1
				
				if (0 == this.status) { // type
					this.typeTxt = e.value[0]
				} else if (1 == this.status) {
					this.collectionTxt = e.value[0]
				}
				
				http_blogpage({params: {share_type_id: this.share_type_id, share_collection_id: this.share_collection_id}})
					.then((res) => {
						if (1 == res.code) {
							this.list = res.data.data
							this.total_page = res.data.last_page
						}
					})
				this.show = false
			},
			cancel(e) {
				this.show = false
			},
			close(e) {
				this.show = false
			},
			goDetail(url) {
				uni.navigateTo({
					url: `/pages/website/${url}`
				})
			},


		}
	}
</script>

<style scoped lang="less">
	.blog_num {
		font-size: 24rpx;
		color: #F2F2F2;
		padding-left: 8rpx;
	}
	.list {
		padding: 8rpx 24rpx;
		margin: 0 8rpx;
		margin-bottom: 10rpx;
	}
	
	.item-container {
		width: 340rpx;
		height: 452rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
		.video_type {
			position: relative;
			.play {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				z-index: 100;
			}
			width: 100%;
			height: 100%;
			overflow: hidden;
			.coverimage {
				border-radius: 8rpx;
				width: 100%; /* 图片宽度 */
				height: 100%; /* 高度自适应 */
				object-fit: cover; /* 图片填充方式，保持纵横比并填充整个容器 */
			}
			
		}
		.article_type {
			background-color: #ffffff;
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			image {
				border-radius: 8rpx 8rpx 0 0;
				width: 100%; /* 图片宽度 */
				height: 100%; /* 高度自适应 */
				object-fit: cover; /* 图片填充方式，保持纵横比并填充整个容器 */
			}
			.title {
				font-weight: 400;
				font-size: 32rpx;
				line-height: 52rpx;
				color: #303133;
				padding: 0 14rpx;
			}
			.updatetime {
				position: absolute;
				font-style: normal;
				font-weight: 300;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #909193;
				left: 14rpx;
				bottom: 14rpx;
			}
		}
	}

	.bg-green {
		background: #6FB19F;
		border-radius: 18px;
	}

	.bor {
		border: 1px solid #C0C4CC;
		color: #303133;
		border-radius: 18px;
	}

	.order {
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #303133;
		line-height: 25px;
	}

	.state {
		height: 40px;
		background: #EEEEEE;
		border-radius: 20px;
		line-height: 40px;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #606266;
		padding: 9px 20px;
	}

	.sanjiaoxing {
		width: 0;
		height: 0;
		border-top: 11px solid #CBCBCB;
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
	}

	.puase {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 222;
		font-size: 55px
	}

	.collet {
		position: absolute;
		bottom: 5px;
		right: 12px;
		left: 12px;
		padding: 9px 0;
		background: rgba(54, 54, 54, 0.85);
	}

	.bg-img {
		height: 546rpx;
	}

	.puase {
		width: 144rpx;
		height: 144rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.num {
		padding: 18rpx 0;
		bottom: 0;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.title {
		padding-top: 20rpx;

		.tag {
			vertical-align: bottom;
			font-size: 28rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 62rpx;
			background: #2367D7;
			border-radius: 2rpx;
			// border: 2rpx solid #2367D7;
			padding: 4rpx 14rpx;
		}

		.text {
			padding-left: 10rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #303133;
			line-height: 62rpx;
		}
	}

	.author {
		padding: 10px 0;

		.time {
			font-size: 32rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #40C6A1;
			line-height: 22px;
		}

		.text {
			font-size: 32rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #909193;
			line-height: 22px;
			padding-left: 32rpx;
		}
	}

	.abstract {
		font-size: 32rpx;
		color: #606266;
		line-height: 52rpx;
		display: -webkit-box; //设置为伸缩盒弹性盒子展示
		-webkit-box-orient: vertical; //伸缩盒弹性盒子的排列方式
	}
	.line{
		height: .5px;
		flex: 1;
		background: red;
		background: #909193;
	}
</style>
